<script setup>
import { ref } from 'vue';
import axios from 'axios';
import ResultModal from './message.vue'
import router from '../routers/router';

let adminUsername = ref("");
let adminPassword = ref("");
const modal = ref(null);
function login() {
    axios({
        method: 'post',
        url: 'http://localhost:8080/admin/adminlogin',
        withCredentials: true,
        data: {
            adminUsername: adminUsername.value,
            adminPassword: adminPassword.value
        }
    }).then(function (response) {
        modal.value.show(response.data);
        if (response.data.code == 1) {
            modal.value.show(response.data);
            router.push('/adminindex')
            localStorage.setItem('adminUsername', adminUsername.value);
        }
    })
}
</script>

<template>
    <div class="f1">
        <div class="box">
            <div class="h">
                <h2>管理员登陆</h2>
            </div>
            <div class="login-box">
                <div class="name in-box">
                    <p>账户名</p>
                    <input v-model="adminUsername" placeholder="请输入账号" class="adminUsername kaung"><br />
                </div>
                <div class="password in-box">
                    <p>密码</p>
                    <input type="password" name="password" id="" v-model="adminPassword" placeholder="请输入密码"
                        class="kaung adminPassword"><br />
                </div>
                <div class="reg-login">
                    <input type="button" value="登陆" @click="login" class="button">
                    <input type="button" value="注册" @click="reg" class="button">
                </div>
            </div>
        </div>
    </div>
    <ResultModal ref="modal" />
</template>

<style scoped>
.f1 {
    display: flex;
    justify-self: center;
    align-items: center;
    height: 97vh;
}

.box {
    display: flex;
    background-color: #d9facf;
    width: 1000px;
    height: 600px;
    flex-direction: column;
    border-radius: 10px;
}

.in-box {
    display: flex;
    flex-direction: column;
    height: 100px;
}

.in-box p {
    margin: 10px 5px;
    color: #969696;
}

.h {
    height: 100px;
    width: 100%;
    background-color: #f7f5ae;
    border-radius: 10px 10px 0 0;
    display: flex;
}

.h h2 {
    display: block;
    margin: auto;
    color: #84ef63;
}

.login-box {
    margin: 0 auto;
    margin-top: 40px;
}

.login-box .kaung {
    height: 40px;
    width: 350px;
    font-size: 15px;
    outline: none;
    background-color: #f8fecb;
    border: none;
    border-radius: 6px;
    padding-left: 5px;
    color: #797979;
}

.button {
    border: none;
    width: 100px;
    height: 30px;
    background-color: #f7fda5;
    border-radius: 6px;

}

.reg-login {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}
</style>